<!DOCTYPE html>
<html lang="en" style="font-size: 0.266666666666vw;">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./icon/iconfont.css">

</head>

<body>
    <div class="bg">

        <!-- 顶部 -->
        <div class="top">
            <div class="dashen tubiao">
                <img src="./img/index/logo-qidian.svg" alt="">
            </div>
            <div class="btn">
                <h1>男生</h1>
                <h1 class="girl">女生</h1>
            </div>
    
            <div class="sousuo">
                <span class="iconfont icon-fangdajing
            "></span>
               
            </div>
        </div>
        <header>
            <div class="logo">
                <img src="./img/index/logo-qidian.svg" alt="">
            </div>
            <div class="btn btn1">
                <h1>男生</h1>
                <h1 class="girl">女生</h1>
            </div>
            <a href="xiazai.html">
            <div class="open">
                
                打开App

            </div>
        </a>
        

            <!-- 搜索框 -->
        </header>
        <div class="sousuokuang">
            <span class="iconfont icon-fangdajing
        "></span>
            <input type="text" placeholder="我的姑父叫朱棣">
        </div>

        <!-- 轮播 -->
        <div class="xianshi">


            <div class="img-box">
                <img src="./img/index/banner1.jpg" alt="">
                <img src="./img/index/banner2.jpg" alt="">
                <img src="./img/index/banner3.jpg" alt="">
                <img src="./img/index/banner4.jpg" alt="">

                <img src="./img/index/banner1.jpg" alt="">
            </div>
        </div>

        <!-- 导航 -->
        <div class="nav">
            <a href="./fenlei.html">
            <ul>
                <li>
                    <img src="./img/index/icon1.png" alt="">
                </li>
                <li>
                    分类
                </li>
            </ul>
        </a>

            <a href="./rank.html">
            <ul>
                <li>
                    <img src="./img/index/icon2.png" alt="">
                </li>
                <li>
                    排行榜
                </li>
            </ul>
        </a>
        <a href="free.html">
            <ul>
                <li>
                    <img src="./img/index/icon3.png" alt="">
                </li>
                <li>
                    免费
                </li>
            </ul>
        </a>
        <a href="./wanben.html">
            <ul>
            
                <li>
                    <img src="./img/index/icon4.png" alt="">
                </li>
                <li>
                    完本
                </li>
            </ul>
        </a>
            <a href="./dashen.html">
            <ul>
                <li>
                    <img src="./img/index/icon5.png" alt="">
                </li>
                <li>
                    大神
                </li>
            </ul>
        </a>
        <a href="./shudan.html">
            <ul>
                <li>
                    <img src="./img/index/icon6.png" alt="">
                </li>
                <li>
                    书单
                </li>
            </ul>
        </a>

        </div>

        <!-- 起点读书App下载 -->
        <a href="./xiazai.html">
        <div class="qidian">
            <div class="qidian-left">
                <img src="./img/index/logo.png" alt="">
                <div>
                    <p>起点读书App</p>
                    <p>海量好书，新人免费</p>
                </div>
            </div>
            <div class="btn-download">
                立即下载
            </div>
        </div>
    </a>


    </div>

    <!-- 新人必读 -->

    <div class="bidu">
        <div class="bidu-tit">
            <div>
                新人必读
                <span>起点优质书单</span>
            </div>
            <div>
                <img src="./img/index/brush.png" alt="">
                <span>换一批</span>
            </div>
        </div>

        <div class="bidu-content">
            <div class="content1">
                <div>
                    <img src="./img/index/book1.webp" alt="">
                    <div>
                        <p>你这领主有问题吧</p>

                        <p>科幻· 时空穿梭</p>
                    </div>
                </div>
                <div>
                    <img src="./img/index/book2.webp" alt="">
                    <div>
                        <p>金刚不坏大寨主</p>

                        <p>科幻· 武侠幻想</p>
                    </div>
                </div>
            </div>
            <div class="content1">
                <div>
                    <img src="./img/index/book3.webp" alt="">
                    <div>
                        <p>我在雪豹当战神</p>

                        <p>军事· 抗战烽火</p>
                    </div>
                </div>
                <div>
                    <img src="./img/index/book4.webp" alt="">
                    <div>
                        <p>我在九叔世界坐大佬</p>

                        <p>悬疑· 古今传奇</p>
                    </div>
                </div>
            </div>

        </div>


    </div>

    <!-- 新书推荐 -->
    <div class="tuijian">
        <div>
            新书推荐
        </div>
        <div>
            三江 · 网文新风
        </div>

    </div>

    <!-- 畅销精选 -->

    <div class="changxiao">
        <div class="changxiao-tit">
            <div>
                畅销精选

            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>
        <div class="changxiao-content">
            <div class="content2">

                <img src="./img/index/book5.webp" alt="">
                <div>
                    <h1>神话大汉，冠军兵圣</h1>
                    <p class="jianjie">
                        百家修兵的世界，‘三十六计’不仅是兵策战计，且能衍生神通兵术！你动用了借尸还魂计，然后真·借尸还魂出现在眼前；当你发动了瞒天过海，天数被蒙蔽，你得以出其不意，搬运兵力，形成来无影去无踪的突袭；
                    </p>

                    <p class="biaoqian">玄幻 · 57万字
                        <span>热血</span>
                        <span>天才流</span>

                    </p>
                </div>

            </div>
            <div class="content2">

                <img src="./img/index/book6.webp" alt="">
                <div>
                    <h1>我睡后混成大明星</h1>
                    <p class="jianjie">
                        一睁眼来到2006年的燕影艺考现场，回到家，义父竟是江文……首部电影打破《英雄》记录，十八岁背负中国最高电影票房记录保持着的名号……在这个似是而非的世界，他在世界电影史上留下自己的名字！我叫秦慕
                    </p>

                    <p class="biaoqian">都市 · 62万字
                        <span>文娱</span>
                        <span>日常文</span>

                    </p>
                </div>

            </div>
            <div class="content2">

                <img src="./img/index/book7.webp" alt="">
                <div>
                    <h1>苟在妖武乱世修仙</h1>
                    <p class="jianjie">
                        百家修兵的世界，‘三十六计’不仅是兵策战计，且能衍生神通兵术！你动用了借尸还魂计，然后真·借尸还魂出现在眼前；当你发动了瞒天过海，天数被蒙蔽，你得以出其不意，搬运兵力，形成来无影去无踪的突袭；
                    </p>

                    <p class="biaoqian">仙侠 · 47万字
                        <span>种田</span>
                        <span>无限流</span>

                    </p>
                </div>

            </div>

        </div>
    </div>

    <!-- 灰色背景分割 -->
    <div class="bgc-gray">

    </div>
    <!-- 猜你喜欢 -->
    <div class="xihuan">
        <div class="xihuan-tit">
            <div>
                猜你喜欢
                <span>根据你的阅读口味智能推荐</span>
            </div>

        </div>

        <div>
            <h2>
                你可能感兴趣的好书
            </h2>
            <div class="content2 ">


                <img src="./img/index/book1.webp" alt="">
                <div>
                    <h1>道诡逸仙</h1>
                    <p class="jianjie">
                        诡异的天道，异常的仙佛，是真？是假？陷入迷惘的李火旺无法分辨。可让他无法分辨的不仅仅只是这些。还有他自己，他病了，病的很重。
                    </p>

                    <p class="biaoqian">仙侠 · 47万字


                    </p>
                </div>

            </div>
        </div>
        <div>
            <h2>
                为你精心挑选的优质作品
            </h2>
            <div class="content2 ">


                <img src="./img/index/book2.webp" alt="">
                <div>
                    <h1>深空彼岸</h1>
                    <p class="jianjie">
                        浩瀚的宇宙中，一片星系的生灭，也不过是刹那的斑驳流光。仰望星空，总有种结局已注定的伤感，千百年后你我在哪里？家国，文明火光，地球，都不过是深空中的一粒尘埃。星空一瞬，人间千年。虫鸣一世不过秋，你我一样在争渡。深空尽头到底有什么？——————书友群见书友圈置顶帖。
                    </p>

                    <p class="biaoqian">都市 · 428万字


                    </p>
                </div>

            </div>
        </div>
        <div>
            <h2>
                万千书友喜欢的精品佳作
            </h2>
            <div class="content2 ">


                <img src="./img/index/book3.webp" alt="">
                <div>
                    <h1>家父汉高祖</h1>
                    <p class="jianjie">
                        一个伟大的帝国刚刚诞生，新的时代即将到来。刘长也曾想过要不要争一争那大位，由自己来率领这个崭新的帝国，可是他看了看自己的周围，刘邦，吕后，刘盈，刘恒...嗯，活着不好吗？于是乎，刘长戴上了穿越者之耻的帽子，开始了混吃等死的咸鱼生活。又名《我愚蠢的欧豆豆》，《这娃其实是项羽的吧？》，《跟你这样的虫豸怎么能治好大汉》等等。
                    </p>

                    <p class="biaoqian">历史 · 354万字


                    </p>
                </div>

            </div>
        </div>
        <div class="huan">
            <img src="./img/index/brush.png" alt="">
            <span>换一批</span>

        </div>
    </div>

    <!-- 灰色背景分割 -->
    <div class="bgc-gray2">

    </div>
    <!-- 限时免费 -->
    <div class="free">
        <div class="changxiao-tit">
            <div class="tit-left">
                限时免费
                <p class="time">
                    <b> <span class="hour">01</span><i>：</i> </b>
                    <b> <span id="hour">04</span><i>：</i> </b>
                    <b> <span id="min">19</span><i>：</i> </b>
                    <b><span id="second">58</span></b>

                </p>
            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>
        <div class="free-content">
            <div class="xianmian">
                <div class="xianmian-img">
                    <img src="./img/index/xianmian1.webp" alt="">
                </div>
                <p>我在四合院有个家</p>
                <h4>海螺的曹阿瞒</h4>

            </div>
            <div class="xianmian">
                <div class="xianmian-img">
                    <img src="./img/index/xianmian2.webp" alt="">
                </div>
                <p>隐士是如何练成的</p>
                <h4>一家之煮</h4>
            </div>
            <div class="xianmian">
                <div class="xianmian-img">
                    <img src="./img/index/xianmian3.webp" alt="">
                </div>
                <p>荒古禁区传道百年，狠人来拜</p>
                <h4>躺尸三万年</h4>
            </div>
            <div class="xianmian">
                <div class="xianmian-img">
                    <img src="./img/index/xianmina4.webp" alt="">
                </div>
                <p>绝世唐门之百变为王</p>
                <h4>死亡吟唱</h4>
            </div>
            <div class="xianmian">
                <div class="xianmian-img">
                    <img src="./img/index/xianmian5.webp" alt="">
                </div>
                <p>人在诸天，从被通缉开始</p>
                <h4>一剑卷风云</h4>
            </div>
            <div class="xianmian">
                <div class="xianmian-img">
                    <img src="./img/index/xianmian6.webp" alt="">
                </div>
                <p>华娱激荡年代</p>
                <h4>黑色的单车</h4>
            </div>

        </div>
    </div>
     <!-- 灰色背景分割 -->
    <div class="bgc-gray">

    </div>
    <!-- 排行榜 -->
    <div class="paihang">
        <div class="changxiao-tit">
            <div class="tit-left">
                排行榜

            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>
        <div class="paihang-nav">
            <a>畅销榜</a>
            <a>风云榜</a>
            <a>
                签约榜
            </a>
            <a>推荐榜</a>
        </div>
        <div class="free-content">
            <div class="xianmian ">
                <div class="t1">
                <img src="./img/index/top1.png" alt="">
            </div>
                <p>灵境行者</p>
                <h4>卖报小郎君</h4>
            </div>
            <div class="xianmian">
                <div class="t2">
                <img src="./img/index/top2.png" alt="">
            </div>
                <p>星空彼岸</p>
                <h4>辰东</h4>
            </div>
            <div class="xianmian" >
                <div class="t3">
                <img src="./img/index/top3.png" alt="">
            </div>
                <p>光阴之外</p>
                <h4>耳根</h4>
            </div>
            <div class="xianmian">
                <div class="t4">
                <img src="./img/index/top4.png" alt="">
            </div>
                <p>诡秘之主</p>
                <h4>爱潜水的乌贼</h4>
            </div>
            <div class="xianmian">
                <div class="t5">
                <img src="./img/index/top5.png" alt="">
            </div>
                <p>道诡逸仙</p>
                <h4>狐尾的笔</h4>
            </div>
            <div class="xianmian">
                <div class="t6">
                <img src="./img/index/top6.png" alt="">
            </div>
                <p>火力为王</p>
                <h4>如水意</h4>
            </div>
        </div>



    </div>
     <!-- 灰色背景分割 -->
    <div class="bgc-gray">

    </div>
    <!-- 分类推荐 -->
    <div class="paihang">
        <div class="changxiao-tit">
            <div class="tit-left">
                分类推荐
                <span
                    style="font-size: 13rem; color: #969ba3; margin-left: 10rem; display: flex; align-items: flex-end; transform: translateY(-1rem);">
                    频道主编推荐
                </span>
            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>
        <div class="paihang-nav">
            <a style="width: 33.3333333333%;">玄幻奇幻</a>
            <a style="width: 33.3333333333%;">武侠仙侠</a>
            <a style="width: 33.3333333333%;">
                都市职场
            </a>

        </div>
        <div class="free-content">
            <div class="xianmian">
                <img src="./img/index/fenlei1.webp" alt="">
                <p>长生：我修炼没有瓶颈</p>
                <h4>老鸡吃蘑菇</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei2.webp" alt="">
                <p>我爹绝对被人夺舍了</p>
                <h4>李别浪</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei3.webp" alt="">
                <p>光阴之主！</p>
                <h4>鱼儿小小</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei4.webp" alt="">
                <p>我的剑意能无限提升</p>
                <h4>岁暮春寒</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei5.webp" alt="">
                <p>从种田开始的日常</p>
                <h4>奋笔十年</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/book1.webp" alt="">
                <p>火力为王</p>
                <h4>如水意</h4>
            </div>
        </div>
        <hr>
        <div class="paihang-nav">
            <a style="width: 33.3333333333%;">历史军事</a>
            <a style="width: 33.3333333333%;">游戏体育</a>
            <a style="width: 33.3333333333%;">
                科幻悬疑
            </a>

        </div>
        <div class="free-content">
            <div class="xianmian">
                <img src="./img/index/fenlei0201.webp" alt="">
                <p>万历强明</p>
                <h4>数沙人</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei0202.webp" alt="">
                <p>人在东汉，胡汉共尊</p>
                <h4>守望青山</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei0203.webp" alt="">
                <p>唐旗</p>
                <h4>灰心的鲸鲨</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei0204.webp" alt="">
                <p>大唐猎户</p>
                <h4>老衲胡来</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/fenlei0205.webp" alt="">
                <p>特战队员的成长之路</p>
                <h4>雪豹魂</h4>
            </div>

        </div>


    </div>
    <!-- 背景图片分割 -->
    <div class="bg-img">
        <img src="./img/index/tips.jpg" alt="">
    </div>
    <!-- 新书抢先 -->
    <div class="changxiao">
        <div class="changxiao-tit">
            <div>
                新书抢先
                <span style="font-size: 13rem; color: #969ba3; margin-left: 10rem;">
                    24小时热销新书
                </span>
            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>
        <div class="changxiao-content">
            <div class="content2">

                <img src="./img/index/qiangxian1.webp" alt="">
                <div>
                    <h1>苟在妖武乱世修仙</h1>
                    <p class="jianjie">
                        方夕穿了，而且是二穿！在修仙界我唯唯诺诺，在异世界我重拳出击！没想到千百年后，在修仙界也成了大佬！（苟道长生+无限流，文抄出品，本本精品，请书友们放心收藏阅读）
                    </p>
                    <p class="biaoqian">
                        <img src="./img/index/user.png " alt="">
                        <em>文抄公</em>

                        <span class="blue">48.38万字</span>
                        <span class="red">连载中</span>
                        <span class="gray">仙侠</span>

                    </p>
                </div>

            </div>
            <div class="content2">

                <img src="./img/index/qiangxian2.webp" alt="">
                <div>
                    <h1>大明国师</h1>
                    <p class="jianjie">
                        【狱中讲课，朱棣偷听后求我当国师】见证了靖难之役结束，作为“诛十族”对象的姜星火终于松了口气。身为资深穿越者，九世穿越即可回现代永生。自觉马上大功告成的姜星火，无聊到开始在狱中讲课，但似乎渐渐不对劲了起来……马三宝：《海权论》里的大航海时代是什么？姚广孝：《国运论》竟然是传说中的屠龙术！朱高炽：《华夏货币史》的银本位没讲完呐。姜星火：“我明天就要砍头了，剩下的课托梦给你们讲吧。”这时，诏狱的墙壁轰然倒塌，一个声音传来。“姜先生，朕是朱棣，求您当国师吧！”
                    </p>

                    <p class="biaoqian">
                        <img src="./img/index/user.png " alt="">
                        <em>西湖遇雨</em>

                        <span class="blue">64.87万字</span>
                        <span class="red">连载中</span>
                        <span class="gray">历史</span>

                    </p>
                </div>

            </div>
            <div class="content2">

                <img src="./img/index/qiangxian3.webp" alt="">
                <div>
                    <h1>警察叫我备案，苦练绝学的我曝光</h1>
                    <p class="jianjie">
                        苏云穿越成一名小主播，苦于没才艺便每天直播‘苦练各种绝学’，想混口饭吃。如：飞牌切苍蝇；木剑打乒乓球；飞针射防弹玻璃；跳远蜻蜓点水……混日子第一天，苏云学会了飞牌，众人以为他是来搞笑的。第五天，苏云飞牌劈开了黄瓜，众人以为他到此为止。第三十天，苏云的卡牌在十米之外切开了木桩，斩死了苍蝇……众人惊愕过后一致认为这是特效！……一段时间后，当苏云意外被曝光，并收到传唤去备案时，他更多的技能一个个被曝光了出来：一苇渡江的轻功！一剑劈开石头的剑术！堪比子弹穿透力的飞针……警察：“你确定这只是个主播？立即备案为s级归档！”【本书没有武林、修炼界，全书唯我独法，世间唯我一人领悟进化，全靠天赋异禀】
                    </p>

                    <p class="biaoqian">
                        <img src="./img/index/user.png " alt="">
                        <em>绝月清空</em>

                        <span class="blue">104.61万字</span>
                        <span class="red">连载中</span>
                        <span class="gray">都市</span>

                    </p>
                </div>

            </div>

        </div>
    </div>
     <!-- 灰色背景分割 -->
    <div class="bgc-gray">

    </div>
    <!-- 畅销完本 -->
    <div class="changxiao">
        <div class="changxiao-tit">
            <div>
                畅销完本
                <span style="font-size: 13rem; color: #969ba3; margin-left: 10rem;transform: translateY(-1rem);
                ">
                    今日畅销完本书
                </span>
            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>
        <div class="changxiao-content">
            <div class="content2">

                <img src="./img/index/wanben1.webp" alt="">
                <div>
                    <h1>诡秘之主</h1>
                    <p class="jianjie">
                        蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我从诡秘中醒来，睁眼看见这个世界：枪械，大炮，巨舰，飞空艇，差分机；魔药，占卜，诅咒，倒吊人，封印物……光明依旧照耀，神秘从未远离，这是一段“愚者”的传说。
                    </p>
                    <p class="biaoqian">
                        <img src="./img/index/user.png " alt="">
                        <em>爱潜水的无贼</em>

                        <span class="blue">446.53万字</span>
                        <span class="red">已经完本</span>
                        <span class="gray">玄幻</span>

                    </p>
                </div>

            </div>
            <div class="content2">

                <img src="./img/index/wanben2.webp" alt="">
                <div>
                    <h1>大奉打更人</h1>
                    <p class="jianjie">
                        《大奉打更人》（第一卷）实体书已在天猫、当当、京东等全平台，以及各个实体书店发售。这个世界，有儒；有道；有佛；有妖；有术士。警校毕业的许七安幽幽醒来，发现自己身处牢狱之中，三日后流放边陲.....他起初的目的只是自保，顺便在这个没有人权的社会里当个富家翁悠闲度日。......多年后，许七安回首前尘，身后是早已逝去的敌人，以及累累白骨。滚滚长江东逝水，浪花淘尽英雄，是非成败转头空。青山依旧在，几度夕阳红。
                    </p>

                    <p class="biaoqian">
                        <img src="./img/index/user.png " alt="">
                        <em>卖报小郎君</em>

                        <span class="blue">380.11万字</span>
                        <span class="red">已经完本</span>
                        <span class="gray">仙侠</span>

                    </p>
                </div>

            </div>
            <div class="content2">

                <img src="./img/index/wanben3.webp" alt="">
                <div>
                    <h1>天启预报</h1>
                    <p class="jianjie">
                        “我想要挨一顿毒打……”——灾厄之剑、旧世界守墓人、调律师、最后的天国捍卫者、二十四个毁灭因素之一、淮海路小佩奇、深渊烈日、最终的地狱之王：槐诗。.某一天，穷困潦倒的槐诗忽然发现自己捡来的金手指终于能用了……只不过，这似乎并不是一件好事。为了赚钱和苟命，他一不小心踏入了这个危险世界。现境之外的边境，日常之后的异常。天文会，绿日、黄金黎明、存世余孽与诸界天敌……究竟是生存还是灭亡？这是个问题。那么，就在这一万零一种拯救世界的方法中，选一个通往HAPPYEND的方向吧。
                    </p>

                    <p class="biaoqian">
                        <img src="./img/index/user.png " alt="">
                        <em>风月</em>

                        <span class="blue">629.69万字</span>
                        <span class="red">已经完本</span>
                        <span class="gray">奇幻</span>

                    </p>
                </div>

            </div>

        </div>
    </div>
     <!-- 灰色背景分割 -->
    <div class="bgc-gray">

    </div>
    <!-- 轻小说 -->
    <div class="paihang qingxiaoshuo">
        <div class="changxiao-tit">
            <div class="tit-left">
                轻小说

            </div>
            <div>
                <b>
                    更多
                </b>
                <span class="iconfont icon-xiangyoujiantou
            "></span>
            </div>
        </div>

        <div class="free-content">
            <div class="xianmian">
                <img src="./img/index/qing1.webp" alt="">
                <p>我的剑豪模拟器</p>
                <h4>火舌</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/qing2.webp" alt="">
                <p>她们都以为自己重生了！</p>
                <h4>佐切</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/qing3.webp" alt="">
                <p>无所谓，风影大人会出手</p>
                <h4>潜水吐泡泡</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/qing4.webp" alt="">
                <p>绝世唐门加载提瓦特刻师傅</p>
                <h4>借我一口欧气</h4>
            </div>
            <div class="xianmian">
                <img src="./img/index/qing5.webp" alt="">
                <p>从武魂开始的神格化</p>
                <h4>山如云</h4>
            </div>

        </div>
    </div>
     <!-- 灰色背景分割 -->
    <div class="bgc-gray">

    </div>
    <!-- 精选专题 -->
    <div class="jingxuan paihang qingxiaoshuo">
        <div class="changxiao-tit">
            <div class="tit-left">
                精选专题
            </div>
        </div>

        <div class="jingxuan-content">
            <div>
                <img src="./img/index/jingxuan1.jpeg" alt="">
            </div>
            <div>
                <img src="./img/index/jingxuan2.jpg" alt="">
            </div>

        </div>
        <div class="jingxuan-content">
            <div>
                <img src="./img/index/jingxuan3.png" alt="">
            </div>
            <div>
                <img src="./img/index/jingxuan4.jpg" alt="">
            </div>

        </div>
        <!-- 登录链接 -->
        <div class="denglu">
            登录后获得更多特色功能 · 
            <a href="./denglu.html"> <span>立即登录</span></a>

        </div>
        <!-- 页脚 -->
        <div class="footer">
            <h1>
                <span>QQ阅读</span>
                <span>
                    红袖添香
                </span>
            </h1>
            <h2>
                <span>客户端</span>
                <span style="color: black;">触屏版</span>
                <span>帮助与客服</span>
                <span>搜索</span>
            </h2>
            <h3>
                <p>网站备案/许可证号：沪B2-20080046-1</p>
                <p>互联网宗教信息服务许可证 编号：沪（2022）0000022</p>
                <p>copyright © 2002-2023 m.qidian.com</p>
            </h3>

        </div>
        <!-- 底部悬浮窗 -->
        <div class="end">
            <div>
                <img src="./img/index/shujia.png" alt="">
                书架
            </div>
           
            <div>
                <img src="./img/index/zhanghu.png" alt="">
                账户
            </div>
        </div>
        <script>
            // 顶部导航栏显示
            let topDiv=document.querySelector('.top');
            window.addEventListener('scroll',()=>{
                let top =document.documentElement.scrollTop;
                if(top>50){
                    topDiv.classList.add('show')
                }
                else{
                    topDiv.classList.remove('show')
                }

            })

            // 计时器
            let hourSpan =document.getElementById('hour');
            let minSpan =document.getElementById('min')
            let secondSpan = document.getElementById('second')
            setInterval(()=>{
               let h = +hourSpan.innerHTML;
               let m = +minSpan.innerHTML;
                let s = +secondSpan.innerHTML;

                s--;
                if(s < 0){
                    s=59;
                    m--;
                }
                if( m<0){
                    m=59;
                    h--;
                }
                h= h < 10 ? '0'+h : h;
                m= m < 10 ? '0'+m : m;
                s= s < 10 ? '0'+s : s;
                
                secondSpan.innerHTML=s;
                minSpan.innerHTML=m;
                hourSpan.innerHTML=h;

                }

            ,1000)

           
        </script>

</body>

</html>